<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<title>站点</title>
	<link href="style/css/bootstrap.min.css" rel="stylesheet">
	<link href="style/css/style.css" rel="stylesheet">
	<script src="style/js/jquery-1.11.0.min.js"></script>
	<script src="style/js/bootstrap.min.js"></script>
	<style>
		#sites{
			display: block;
		}
	</style>
</head>
<body>
	<div class="container-fluid main">
		<div class="left">
			<div class="row logo">
				<div class="media">
				  	<div class="media-left">
				    	<a href="#">
				      		<img class="media-object logo-img" src="style/css/logo2.png" alt="瑞海科技">
				    	</a>
				  	</div>
				  	<div class="media-body">
				    	<p class="logo-name">瑞海科技</p>
				  </div>
				</div>
			</div>
			<div class="row">
                <ul id="manageList">
                    <li class="default active">
                        <div>
                            <img src="style/css/home1.png" alt="home">
                            <a href="home.html" id="home">首页</a>
                        </div>
                    </li>
                    <li class="default">
                        <div class="pull-left">
                            <img src="style/css/site2.png" alt="site">
                            <a href="site.html" id="site">站点</a>
                        </div>
                        <div class="toggle pull-right" onclick="isShow1()">
                            <img id="choose1" src="style/css/upArrow.png" alt="">
                        </div>
                        <div class="clearfix"></div>                            
                    </li>
                    <div id="sites">
                    	<div class="site-item">
	                        <a href="#" class="item checked">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>
	                    <div class="site-item">
	                        <a href="#" class="item">大秦郡</a>
	                    </div>    
                    </div>
                    <li class="default">
                        <div>
                            <img src="style/css/history2.png" alt="history">
                            <a href="history.html" id="history">历史数据</a>
                        </div>                               
                    </li>
                    <li class="default">
                        <div class="pull-left">
                            <img src="style/css/userManage2.png" alt="admin">
                            <a href="userManage.html" id="userManage">后台管理</a>
                        </div>
                        <div class="toggle pull-right" onclick="isShow2()">
                            <img id="choose2" src="style/css/downArrow.png" alt="">
                        </div>
                        <div class="clearfix"></div>                               
                    </li>
                    <div id="manage">
                    	<div class="manage-item">
                            <img src="style/css/green.png" alt="user">
                            <a href="userManage.html" class="large-item checked">用户管理</a>
                        </div>
                        <div class="manage-item">
                            <img src="style/css/yellow.png" alt="site">
                            <a href="siteManage.html" class="large-item">站点管理</a>
                        </div>
                        <div class="manage-item device">
                        	<div class="pull-left">
	                            <img src="style/css/pink.png" alt="device">
                            	<a href="cameraManage.html" class="large-item">设备管理</a>
	                        </div>
	                        <div onclick="isShow3()">
	                            <img id="choose3" src="style/css/add.png" alt="add">
	                        </div>
	                        <div class="clearfix"></div>
                        </div>
                        <div id="device">
                        	<div class="device-item">
		                        <a href="cameraManage.html" class="small-item">摄像头</a>
		                    </div>
		                    <div class="device-item">
		                        <a href="senseManage.html" class="small-item">传感</a>
		                    </div>
                        </div>                        
                        <div class="manage-item">
                            <img src="style/css/gray.png" alt="admin">
                            <a href="publishAnnounce.html" class="large-item">发布公告</a>
                        </div>
                    </div>
                </ul>
            </div>
            <div class="row footer text-center">
				Copyright &copy; 2018 | &nbsp; 瑞海集团  版权所有 &nbsp;
			</div>
			<script type="text/javascript">
                $(document).ready(function(){ 
                    $("#manageList li a").each(function(){  
                        $this = $(this); 
                        var id2=$this.attr("id");
                        var src2="style/css/"+id2+"2.png";
                        $this.prev().attr("src",src2);
                        if($this[0].href==String(window.location)){ 
                            $("#manageList li").removeClass("active");
                            $this.parent().parent().addClass("active");
                            var id1=$this.attr("id");
                        	var src1="style/css/"+id1+"1.png";
                        	$this.prev().attr("src",src1);
                        } 
                    }); 
                    $("#sites div a").each(function(){  
                        $this = $(this);  
                        if($this[0].href==String(window.location)){
                        	$("#manageList li").removeClass("active");
                        	$("#manageList li:eq(1)").addClass("active"); 
                            $("#sites div a").removeClass("checked");
                            $this.addClass("checked");  
                        } 
                    });
                    $("#manage div a").each(function(){  
                        $this = $(this);  
                        if($this[0].href==String(window.location)){
                        	$("#manageList li").removeClass("active");
                        	$("#manageList li:eq(3)").addClass("active");
                        	console.log($("#manageList li:eq(3)")); 
                            $("#manage div a").removeClass("checked");
                            $this.addClass("checked");  
                        } 
                    }); 
                });
                function isShow1(){
					var sites=document.getElementById('sites');
					$("#choose1").src="style/css/downArrow.png";
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(1)").addClass("active");
			        if(sites.style.display == 'none'){  
			            sites.style.display = 'block';
			            $('#choose1').attr('src', 'style/css/upArrow.png');
			        }else{
			            sites.style.display = 'none';
			            $('#choose1').attr('src', 'style/css/downArrow.png');
			        }
			    } 
			    function isShow2(){
					var manage=document.getElementById('manage');
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(3)").addClass("active");
			        console.log($("#manageList li:eq(3)")); 
			        if(manage.style.display == 'none'){  
			            manage.style.display = 'block';
			            $('#choose2').attr('src', 'style/css/upArrow.png');
			        }else{
			            manage.style.display = 'none';
			            $('#choose2').attr('src', 'style/css/downArrow.png');
			        }
			    }
			    function isShow3(){
					var device=document.getElementById('device');
					$("#manageList li").removeClass("active");
			        $("#manageList li:eq(3)").addClass("active");
			        console.log($("#manageList li:eq(3)")); 
			        if(device.style.display == 'none'){  
			            device.style.display = 'block';
			            $('#choose3').attr('src', 'style/css/reduce.png');
			        }else{
			            device.style.display = 'none';
			            $('#choose3').attr('src', 'style/css/add.png');
			        }
			    }  
            </script>
		</div>
		<div class="right">
			<div class="row header">
				<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
					<div class="row search">
						<input type="search" placeholder="请输入站点进行查询…" class="searchInput">
						<a href="#" class="searchLink"></a>
					</div>
				</div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 pull-right">
                    <div class="row userMsg pull-right">
                    	<a href="#" class="bell" onclick="javasrcipt:ShowDiv2('warnMsg')"><img src="style/css/bell.png" alt="bell" class="bellImg"><span class="badge">7</span></a>
                        <a href="#" onclick="javasrcipt:ShowDiv('personalCenter','fade')">   
                    		<img src="style/css/people.png" alt="people">
                        	<span class="username">用户名</span>
                    	</a>
                        <a type="button" class="btn exit">安全退出</a>    
                    </div>                   
                </div> 
			</div>
			<div class="row welcome">
				<div class="col-lg-3 col-md-4 col-sm-8 col-xs-8">
					<ul class="list-inline tab1 row"> 
						<li class="tabLi camera col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
							<img src="style/css/camera1.png" alt="home">
		                    <a href="site.html" class="checkedA">视频</a>
						</li> 
						<li class="tabLi sense col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
							<img src="style/css/sense2.png" alt="home">
		                    <a href="sense.html">传感</a>
						</li>
					</ul>
				</div>
				<div class="col-lg-6 col-md-8 hidden-sm hidden-xs pull-right">
					<p class="msg pull-right">欢迎您使用！<span class="small">您最后一次登录时间为 <span>02/01/2019 05:34:59 PM</span></span></p>
				</div>
			</div>
			<div class="row videos">
				<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
					<div class="row">
						<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 alarmNumber">#202编号</div>
						<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 alarmInfo ">
							<div class="row pull-right">
								<span>非法入侵,人员未佩戴安全帽,请处理</span>
								<a href="#" class="alarmLink">确认并处理</a>
							</div>
						</div>
					</div>
					<div class="row video">
						<object type='application/x-vlc-plugin' id='vlc1' width="100%" height="340px" events='True' pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
                           	<param name='mrl' value='rtsp://admin:a1234567@192.168.8.68/h264/ch1/main/av_stream' />
                            <param name='volume' value='50' />
                            <param name='autoplay' value='true' />
                            <param name='loop' value='false' />
                            <param value="transparent" name="wmode">
                            <embed id='vlc' wmode="transparent" type="application/x-vlc-plugin" width="100%" height="340" pluginspage="http://www.videolan.org" allownetworking="internal" allowscriptaccess="always" quality="high" src="rtsp://admin:a1234567@192.168.8.68/h264/ch1/main/av_stream">     
                        </object>
					</div>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
					<div class="row">
						<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 alarmNumber">#202编号</div>
						<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 alarmInfo ">
							<div class="row pull-right">
								<span>非法入侵,人员未佩戴安全帽,请处理</span>
								<a href="#" class="alarmLink">确认并处理</a>
							</div>
						</div>
					</div>
					<div class="row video">
						<object type='application/x-vlc-plugin' id='vlc1' width="100%" height="340px" events='True' pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
                           	<param name='mrl' value='rtsp://admin:a1234567@192.168.8.68/h264/ch1/main/av_stream' />
                            <param name='volume' value='50' />
                            <param name='autoplay' value='true' />
                            <param name='loop' value='false' />
                            <param value="transparent" name="wmode">
                            <embed id='vlc' wmode="transparent" type="application/x-vlc-plugin" width="100%" height="340" pluginspage="http://www.videolan.org" allownetworking="internal" allowscriptaccess="always" quality="high" src="rtsp://admin:a1234567@192.168.8.68/h264/ch1/main/av_stream">     
                        </object>
					</div>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
					<div class="row">
						<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 alarmNumber">#202编号</div>
						<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 alarmInfo ">
							<div class="row pull-right">
								<span>非法入侵,人员未佩戴安全帽,请处理</span>
								<a href="#" class="alarmLink">确认并处理</a>
							</div>
						</div>
					</div>
					<div class="row video">
						<object type='application/x-vlc-plugin' id='vlc1' width="100%" height="340px" events='True' pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
                           	<param name='mrl' value='rtsp://admin:a1234567@192.168.8.68/h264/ch1/main/av_stream' />
                            <param name='volume' value='50' />
                            <param name='autoplay' value='true' />
                            <param name='loop' value='false' />
                            <param value="transparent" name="wmode">
                            <embed id='vlc' wmode="transparent" type="application/x-vlc-plugin" width="100%" height="340" pluginspage="http://www.videolan.org" allownetworking="internal" allowscriptaccess="always" quality="high" src="rtsp://admin:a1234567@192.168.8.68/h264/ch1/main/av_stream">     
                        </object>
					</div>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
					<div class="row">
						<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 alarmNumber">#202编号</div>
						<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 alarmInfo ">
							<div class="row pull-right">
								<span>非法入侵,人员未佩戴安全帽,请处理</span>
								<a href="#" class="alarmLink">确认并处理</a>
							</div>
						</div>
					</div>
					<div class="row video">
						<object type='application/x-vlc-plugin' id='vlc1' width="100%" height="340px" events='True' pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
                           	<param name='mrl' value='rtsp://admin:a1234567@192.168.8.68/h264/ch1/main/av_stream' />
                            <param name='volume' value='50' />
                            <param name='autoplay' value='true' />
                            <param name='loop' value='false' />
                            <param value="transparent" name="wmode">
                            <embed id='vlc' wmode="transparent" type="application/x-vlc-plugin" width="100%" height="340" pluginspage="http://www.videolan.org" allownetworking="internal" allowscriptaccess="always" quality="high" src="rtsp://admin:a1234567@192.168.8.68/h264/ch1/main/av_stream">     
                        </object>
					</div>
				</div>
			</div>
		</div>
	</div>
		<div id="fade" class="black_overlay">
	</div>
	<div id="warnMsg" class="container-fluid warn_content">
		<div class="row">
			<a href="#">
				<span>监控</span>预警
				<span>2</span>条
				<img src="style/css/warn.png" alt="warn">
			</a>
		</div>
		<div class="row">
			<a href="">
				<span>传感</span>预警
				<span>5</span>条
				<img src="style/css/warn.png" alt="warn">
			</a>
		</div>
	</div>
	<div id="personalCenter" class="container-fluid white_content">
		<div class="row title">
			<span class="pull-left titleItem">个人中心</span>
			<a class="pull-right titleItem link"  onclick="CloseDiv('personalCenter','fade')">     
			  <img src="style/css/shut.png"/>  
			</a>
		</div>
		<div class="row content">
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">头像:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<a href="#" class="link"><img src="style/css/camera4.png"/></a>
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">用户名:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<input type="text" value="瑞海科技" class="input">
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">密码:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8">
					<input type="password" value="******" class="input">
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">站点:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8 siteContent">
					<div class="siteContentItem">云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,云谷边,万科世纪城,大世界城,</div>
				</div>
			</div>
			<div class="row contentItem">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<label class="nameItem">摄像头:</label>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-8 siteContent">
					<div class="siteContentItem">camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•camera#1•</div>
				</div>
			</div>		
		</div>
		<div class="row">
			<div class="row date">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<sapn>创建日期:</span>
				</div>
				<div class="col-lg-10 col-md-9 col-sm-9">
					<div class="creatDate">2019-01-19</div>
				</div>
			</div>
			<div class="row date">
				<div class="col-lg-2 col-md-3 col-sm-3 text-right">
					<span>修改日期:</span>
				</div>
				<div class="col-lg-10 col-md-9 col-sm-9">
					<div class="editDate">2019-01-24</div>
				</div>
			</div>
		</div>
		<div class="row btns text-center">
			<input type="submit" value="保存" class="save">
			<a href="#" class="cancel" onclick="CloseDiv('personalCenter','fade')">取消</a>
		</div>			
	</div>
<script src="style/js/public.js"></script>
</body>
</html>